<template>
    <theme-box title="商品添加">
        <form class="form-inline" @submit.prevent v-el:form>
            <div class="box-body">
                <form-group title="商户号" :required="true">
                    <select name="mchtId" class="form-control" v-model="mchtIdValue" style="width:265px;max-width: 265px">
                        <option v-for="mcht in mchtList" :value="mcht.value">
                            {{mcht.key | option-value 23}}
                        </option>
                    </select>
                </form-group>
                <form-input title="商品名称" :required="true" name="dishName"></form-input>
                <form-group title="商品图片" name="file" :required="true">
                    <file-upload v-ref:fileupload class="fileImg"></file-upload>
                </form-group>
                <form-group title="商品类型" :required="true" >
                    <select name="dishType" class="form-control" style="max-width: 265px;width:265px;"  >
                        <option v-for="type in typeList" :value="type.typeId">
                            {{type.typeName}}
                        </option>
                    </select>
                </form-group>
                <form-input title="价格" :required="true" name="dishPrice"></form-input>
            </div>
            <div class="box-footer">
                <v-button type="reset" @click="reset">重置</v-button>
                <v-button type="submit" theme="primary" class="pull-right">确认</v-button>
            </div>

        </form>

    </theme-box>
</template>

<script>
    var serialize = require('form-serialize');

    export default {
        created() {

        },
        data: () => ({
            mchtList: [],
            mchtIdValue: "",
            address: "",
            hintSize: "0",
            typeList: [],
            recomOptions: [
                {key: "未推荐", value: "0"},
                {key: "推荐", value: "1"},
                {key: "店长推荐", value: "2"},
            ],
            dishStatOptions: [
                {key: "正常", value: "0"},
                {key: "无库存", value: "1"},
            ],
        }),
        mcht: false,
        computed: {
            hintSize: function () {
                return this.address.length
            }
        },
        watch: {
            mchtIdValue(v){
                let self = this;
                self.$post({
                    url: "/api/v2" + projectName_Url + "/plat/dishType/querylow/" + v,
                    method: "GET"
                }).then(response => {
                    let list = response.content.lowTypeNameList;
                    self.$set("typeList", list)
                }, error => {
                });
            }
        },
        methods: {
            reset() {
                $("label.error").remove();
                this.$els.form.reset();
            },
            getMcht(data) {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: "/api/v2" + projectName_Url + "/list/mcht/" + mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    self.$set("mchtList", list);
                    self.mchtIdValue = list[0].value
                }, error => {
                });
            },
            typeFn(data) {
                let self = this;
                self.$post({
                    url: "/api/v2" + projectName_Url + "/plat/dishType/querylow/" + mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content.lowTypeNameList;
                    self.$set("typeList", list)
                }, error => {
                });
            },
        },
        ready: function () {
            let self = this;
            self.getMcht();
//             self.typeFn();
            $(this.$els.form).validate({
                submitHandler: function () {
                    let form = this.currentForm;
                    let formData = new FormData(form);
                    loading(true);
                    self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/dish/add",
                        method: "post",
                        data: formData
                    }).then(response => {
                        let data = {
                            title: "操作成功",
                            content: "是否到商品列表查看?"
                        }
                        self.reset();
                        Midway.confirm(data).then(function () {
                            self.$route.router.go('/cuisine/varietyList');
                        })
                    }).then(() => loading(false)).catch(() => loading(false))
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "file") {
                        error.insertAfter(".file-item");
                    } else {
                        error.insertAfter(element)
                    }
                },
                rules: {
                    mchtId: {
                        required: true
                    },
                    file: {
                        required: true
                    },
                    dishName: {
                        required: true,
                        maxlength:10
                    }, dishType: {
                        required: true,
                    }, dishPrice: {
                        required: true,
                        decimal2: true
                    }
                }
            });
        }
    }
</script>
